<template>
  <page-frame>
    <div class="consultingNewComplaint">
      <div class="toptitle">
        <div class="left">问题上报-新增</div>
        <div class="right">
          <div class="btns">
            <div v-if="!ways">
              <el-button @click="submit('ruleForm')" class="lightGreenBtn">提交</el-button>
              <el-button @click="back" >返回</el-button>
            </div>
            <div v-if="ways">
              <el-button @click="back" >返回</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="提出人" prop="proposer">
                    <el-input v-model="ruleForm.proposer" disabled placeholder="请输入提出人姓名" :disabled="ways"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系方式" prop="contact">
                    <el-input v-model="ruleForm.contact"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="关联会员" prop="memberId">
                    <el-autocomplete v-model="memberView.memberName" :fetch-suggestions="querySearchAsync" placeholder="请输入提出人姓名" @select="handleSelect" :disabled="ways"></el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="床位" prop="location">
                    <el-input v-model="ruleForm.location" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="问题类型" prop="woTypeId">
                    <el-select v-model="ruleForm.woTypeId" placeholder="请选择问题类型" :disabled="ways">
                      <el-option
                        v-for="item in typeOptions"
                        :label="item.typeName"
                        :value="item.woTypeId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button type="text" @click="addType=true">点此添加问题类型</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item label="问题描述" prop="woDesc" class="edit">
                    <quill-editor
                      style="height:200px;"
                      ref="myTextEditor"
                      v-model="ruleForm.woDesc"
                      @enable="isEditor"
                      :options="editorOption"
                    >
                    </quill-editor>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-top: 100px;">
                <el-col :span="12">
                  <el-form-item label="记录人" prop="currentName">
                    <el-input v-model="ruleForm.currentName" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="指派责任人" prop="dutyPerson">
                    <el-autocomplete v-model="responsible.empName" :fetch-suggestions="querySearchAsyncs" placeholder="请输入指派责任人" @select="responsibleSelect" :disabled="ways"></el-autocomplete>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="是否已解决" prop="status">
                  <el-radio class="radio" v-model="ruleForm.status" :label="1">是</el-radio>
                  <el-radio class="radio" v-model="ruleForm.status" :label="0">否</el-radio>
                </el-form-item>
              </el-row>
            </el-form>
      </div>

      <el-dialog title="新增问题类型" v-model="addType" size="tiny" :close-on-click-modal="false">
        <div class="input-item">
          <label>新增问题类型</label>
          <el-input v-model="typeObj.typeName" style="width:80%!important;"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addType = false">取 消</el-button>
          <el-button type="primary" @click="queryTypes">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </page-frame>
</template>

<script >
  import {quillEditor} from  'vue-quill-editor';
  import consultingComplaintApi from '../../service/serCenter/consultingComplaintApi';
  import commonApi from '../../service/member/commonApi'
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  import commonJs from '../../config/common'
  export default {
    data () {
      var validatePhone = (rule, value, callback) => {
        if(value==''){
          return callback(new Error('请输入手机号码'));
        }else{
          var phoneStatus = commonJs.checkPhone(value);
          if(!phoneStatus){//wrong phone number
            callback(new Error('手机号码格式不正确，请重新输入'));
          }else{
            callback();
          }
        }
      };
      return {
        ways:false,
        editorOption:{
          placeholder: '请填写问题描述',
        },
        memberView:{
          memberName: "",
        },
        responsible:{
          empName: "",
        },
        memberInfor:{},
        members:[],
        emps:[],
        typeOptions:[],
        ruleForm: {
          proposer: "",
          contact:'',
          memberId: null,
          woTypeId:null,
          woDesc: "",
          currentName:'',
          status:0,
          dutyPerson:null,
        },
        rules: {
          proposer:[
            { required: true, message: '请输入提出人姓名', trigger: 'blur' },
          ],
          woTypeId: [
            {type:'number', required: true, message: '请选择问题类型', trigger: 'change' },
          ],
          contact: [
            {required: true, validator:validatePhone, trigger: 'blur' },
          ],
          woDesc:[
            { required: true, message: '请填写问题描述', trigger: 'blur' },
          ],
        },
        addType:false,
        typeObj:{
          typeName:null,
        }
      }
    },
    methods: {
      init(){
        if(this.$route.params.way==0){//详情
          this.ways = true;
          this.getDetailInfo(this.$route.params.row);
          this.isEditor(false);
        }else if(this.$route.params.way==1){//增加
          this.ways = false;
          this.isEditor(true);
        }
        this.getAllMember();
        this.getRecorder();
        this.getAllProTypes();

        this.getAllEmployee();
      },
      /**
       * （禁止/允许）编辑富文本编辑器
       */
      isEditor(ways){
        this.$refs.myTextEditor.quill.enable(ways);
      },
      /**
       * 根据Id获取详情
       */
      getDetailInfo(row){
        let self = this;
        consultingComplaintApi.getComplainDetail(row.woId).then(
          (response)=>{
            self.ruleForm = response.data.data.baseCheckComplainDetailDTO;
            self.memberView.memberName = response.data.data.baseCheckComplainDetailDTO.proposer;
            self.ruleForm.currentName = response.data.data.baseCheckComplainDetailDTO.createUser;
          }
        );
      },
      /**
       * 提交
       */
      submit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            consultingComplaintApi.newComplaints(this.ruleForm).then(
              (response)=>{
                if(response.data.status==200){
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  this.$router.push({name:'consultingComplaint'});
                }
              }
            );
          } else {
//            console.log('error submit!!');
            return false;
          }
        });
      },
      /**
       * 返回
       */
      back(){
        this.$router.push({name:'consultingComplaint'})
      },
      /**
       * 获取记录人
       */
      getRecorder(){
        let self = this;
        consultingComplaintApi.getRecorder().then(
          (response)=>{
            self.ruleForm.currentName = response.data.data.realName;
          }
        );
      },
      /**
       * 筛选会员(三个相关的函数)
       */
      querySearchAsync(queryString, cb) {
        var members = this.members;
        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
        console.debug(results);
      }, 1000);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.memberInfor = item;
        this.ruleForm.memberId = item.memberId;
        this.ruleForm.location = item.bedNo;
      },
      /**
       * 获得所有会员
       */
      getAllMember(){
        let self = this;
        outRegistrationApi.getAllMemberInfor(self.memberView).then(function (response) {
          self.members = response.body.data;
          for(var i=0;i<self.members.length;i++){
            var  member = self.members[i];
            member.value = member.memberName;
          };
        })
      },
      /**
       * 筛选指派责任人(三个相关的函数)
       */
      querySearchAsyncs(queryString, cb) {
        var emps = this.emps;
        var results = queryString ? emps.filter(this.createStateFilters(queryString)) : emps;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
        console.debug(results);
      }, 1000);
      },
      createStateFilters(queryString) {
        return (state) => {
          return (state.empName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      responsibleSelect(item){
        this.ruleForm.dutyPerson = item.emId;
      },
      /**
       * 获得所有员工
       */
      getAllEmployee(){
        let self = this;
        consultingComplaintApi.getAllStaff(self.responsible).then(
          (response)=>{
            self.emps = response.body.data;
            for(var i=0;i<self.emps.length;i++){
              var emp = self.emps[i];
              emp.value = emp.emName;
            };
          }
        );
      },
      /**
       * get all problem types
       */
      getAllProTypes(){
        let self  = this;
        consultingComplaintApi.getProTypes().then(
          (response)=>{
            self.typeOptions = response.data.data;
          }
        );
      },
      /**
       * add problem types
       */
      queryTypes(){
        let self = this;
        consultingComplaintApi.addProTypes(self.typeObj).then(
          (response)=>{
            self.addType = false;
            self.$message({
              message:'添加成功!',
              type:'success'
            });
            self.getAllProTypes();
          }
        );
      },
    },
    mounted: function () {
      this.init();
    },
    components:{
      quillEditor
    },

  }
</script>
<style>
  .consultingNewComplaint .file-content{
    width:80%;
    margin:50px auto;
  }

  .consultingNewComplaint .el-textarea{
    width:91%!important;
  }

  .consultingNewComplaint  .el-autocomplete{
    width: 100%;
  }
  .consultingNewComplaint .edit .el-form-item__error{
    margin-top:100px;
  }
</style>
